<template>
  <Modal v-model="isOpen" title="新建菜单" width="640px" :loading="loading" @on-ok="ok" @on-cancel="cancel" ok-text="提 交" cancel-text="关 闭">
    <Form ref="menu" :model="menu" :label-width="80">
      <FormItem label="菜单等级" prop="level">
        <RadioGroup v-model="menu.level" v-for="(level,idx) in this.$store.state.menuLevelOptions.commons" :key="idx" @input="loadTopMenu">
          <Radio :label="level.value"><span v-text="level.text"></span></Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="顶级菜单" prop="top">
        <Select v-model="menu.top" clearable @input="loadUpMenu">
          <Option v-for="top in topOptions" :value="top.id" :key="top.id" v-text="top.name"></Option>
        </Select>
      </FormItem>
      <FormItem label="上级菜单" prop="up_id" v-if="menu.level===3">
        <Select v-model="menu.up_id" clearable>
          <Option v-for="up in upOptions" :value="up.id" :key="up.id" v-text="up.name"></Option>
        </Select>
      </FormItem>
      <FormItem label="菜单名" prop="name">
        <Input type="text" v-model="menu.name" />
      </FormItem>
      <FormItem label="菜单url" prop="url">
        <Input type="text" v-model="menu.url" />
      </FormItem>
      <FormItem label="菜单状态" prop="status">
        <RadioGroup v-model="menu.status" v-for="(status,idx) in this.$store.state.statusOptions.commons" :key="idx">
          <Radio :label="status.value"><span v-text="status.text"></span></Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="显示状态" prop="is_nav">
        <RadioGroup v-model="menu.is_nav" v-for="(status,idx) in this.$store.state.statusOptions.commons" :key="idx">
          <Radio :label="status.value"><span v-text="status.text"></span></Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="权重" prop="weight">
        <Input type="text" v-model="menu.weight" number />
      </FormItem>
      <FormItem label="图标" prop="icon">
        <Input type="text" v-model="menu.icon" />
      </FormItem>
    </Form>
    <Spin size="large" fix v-if="isShowSpin"></Spin>
  </Modal>
</template>

<script>
  import menu from '@/models/setting/sys/menu'

  export default {
    name: 'edit-menu',
    props: ['params'],
    data () {
      return {
        loading: true,
        isOpen: true,
        isShowSpin: true,
        menu: {
          status: -1,
          is_nav: -1
        },
        upOptions: [],
        topOptions: []
      }
    },
    mounted () {
      menu.get(this.params.id).then(r => {
        if (r.code === 200) {
          this.menu = r.data
          this.loadTopMenu()
          setTimeout(() => {
            this.isShowSpin = !this.isShowSpin
          }, 300)
        } else {
          this.cancel()
          this.$Message.error({
            content: r.msg,
            duration: 5,
            closable: true
          })
        }
      }).catch(r => {
        console.log(r)
      })
    },
    methods: {
      loadTopMenu () {
        this.topOptions = []
        this.upOptions = []
        if (this.menu.level === 1) {
          return
        }
        menu.topMenus(this.menu.level).then(r => {
          if (r.code === 200) {
            this.topOptions = r.data
          } else {
            this.$Message.error({
              content: r.msg,
              duration: 5,
              closable: true
            })
          }
        }).catch(r => {
          console.log(r)
        })
      },
      loadUpMenu () {
        if (this.menu.level !== 3 || this.menu.top === '') {
          this.upOptions = []
          return
        }
        menu.upMenus(this.menu.level, this.menu.top).then(r => {
          if (r.code === 200) {
            this.upOptions = r.data
          } else {
            this.$Message.error({
              content: r.msg,
              duration: 5,
              closable: true
            })
          }
        }).catch(r => {
          console.log(r)
        })
      },
      ok () {
        menu.edit(this.menu).then(r => {
          if (r.code === 200) {
            this.$emit('on-ok', {
              refresh: true
            })
            this.isOpen = !this.isOpen
            this.$Message.success({
              content: r.msg,
              duration: 5,
              closable: true
            })
          } else {
            this.loading = false
            this.$Message.error({
              content: r.msg,
              duration: 5,
              closable: true
            })
          }
        }).catch(r => {
          this.loading = false
          console.log(r)
        })
      },
      cancel () {
        this.$emit('on-cancel', {
          refresh: false
        })
      }
    }
  }
</script>
